<template>
	<!-- 航班信息 -->
	<view class="flightItem " @click="gofilghtDetail">

		<view class="" style="width:95%;position: relative;" @focus="onFocus" @blur="onBlur">
			<view class="line1">
				<view class="left">
					<view class="airline-icon">
						<img :src="iconPath" class="img">
					</view>
					<view style="margin-left: 8px;">{{form.infoAirline}}</view>

				</view>
				<view class="line3">
					<view style="width:50%">
						{{FlightNo}}
					</view>
					<view>{{FlightData}}</view>
				</view>
				<view v-if="[form.inFlightRouteType,form.outFlightRouteType].includes('国内')" class="tag"
					style="right: -25px;top: -10px;background-color:#de000f ;">
					国内
				</view>
				<view v-if="[form.inFlightRouteType,form.outFlightRouteType].includes('国际')" class="tag"
					style="right: -25px;top: -10px;background-color:#48a500;">
					国际
				</view>
				<view v-if="[form.inFlightRouteType,form.outFlightRouteType].includes('地区')" class="tag"
					style="right: -25px;top: -10px;background-color:#5fb7ff;">
					地区
				</view>
				<view v-if="isFlight" class="tagadd">
					<!-- :class="{ 'triangle': isFocused }" -->
					<view  class="triangle" >
					</view>
				</view>
			</view>
			<view class="">
				<span class="" style="display: inline-block;width:50%">
					预计
				</span>
				<span class="" style="display: inline-block;width:50%">
					预计
				</span>
			</view>
			<view class="line2">
				<view class="left">
					<view style="margin-right: 5px;">{{flightKind==1?form.preTakeoffTime :form.outExpectedTime}}</view>
					<span>{{FlightRoute[0]}}</span>
				</view>
				<view class="left">
					<view style="margin-right: 5px;">{{flightKind==1?form.inExpectedTime :form.folLandTime}}</view>
					<span>{{FlightRoute[1]}}</span>
				</view>
			</view>
			<view class="line" style="padding-bottom:10px;margin-bottom:0">
				<span v-if="flightKind==1&&form.inFlightState">
					进港航班状态:{{form.inFlightState }}
				</span>
				<span v-else>
					出港航班状态:{{ form.outFlightState}}
				</span>

				<span>
					机位:{{form.inStand||form.outStand}}
				</span>
				<span>
					航班性质:{{form.flightProperty }}
				</span>
			</view>
		</view>

	</view>

</template>

<script>
	import {
		airlineConfig
	} from '@/utils/airlineIcons.js'
	const iconPath = 'static/airlines/'
	export default {
		props: {
			form: {
				type: Object,
				default: function() {
					return {

					};
				}
			},
			infoAirline: {
				type: String,
				default: 'default'
			},
			isFlight: {
				default: false
			}
		},
		data() {
			return {
				options1: [{
					text: '收藏',
					style: {
						backgroundColor: '#3c9cff'
					}
				}, {
					text: '删除',
					style: {
						backgroundColor: '#f56c6c'
					}

				}],
				iconPath: '',
				isFocused: false,
			}
		},
		computed: {
			flightKind() {
				if (this.form.flightKind == "进港") return 1
				else if (this.form.flightKind == "出港") return 2
				else return ''
			},
			FlightNo() {
				// if(this.flightKind==1)
				// return this.form
				// else if(this.flightKind==2)
				// return this.form
				if (this.flightKind == 1)
					return this.form.inFlightNo
				else if (this.flightKind == 2)
					return this.form.outFlightNo
				else return ''
			},
			FlightData() {
				if (this.flightKind == 1)
					return this.form.inDate.replace(/^(\d{4})-(\d{2})-(\d{2}).*$/, '$2-$3');
				else if (this.flightKind == 2)
					return this.form.outDate.replace(/^(\d{4})-(\d{2})-(\d{2}).*$/, '$2-$3');
				else return ''
			},
			FlightRoute() {
				if (this.flightKind == 1 && this.form.inFlightRoute)
					return this.form.inFlightRoute.split('-')
				else if (this.flightKind == 2 || this.form.outFlightRoute)
					return this.form.outFlightRoute.split('-')
				else return [0, 0]
			},

		},
		onLoad: function() {},
		mounted() {
			this.airlineIcon()
		},
		methods: {
			onFocus() {
				this.isFocused = true;
			},
			onBlur() {
				this.isFocused = false;
			},

			gofilghtDetail() {
				this.$emit('gofilghtDetail', this.form)
			},
			airlineIcon() {
				if (!this.form.infoAirline) {
					this.iconPath = iconPath + airlineConfig.default
				} else {
					const keySim = this.form.infoAirline.split('航空')[0]
					if (airlineConfig[this.form.infoAirline]) {
						this.iconPath = iconPath + airlineConfig[infoAirline]
					} else if (airlineConfig[keySim]) {
						this.iconPath = iconPath + airlineConfig[keySim]
					} else {
						this.iconPath = iconPath + airlineConfig.default
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tagadd {
		padding: 5px;
		color: #fff;
		border-radius: 0 15px 0 15px;
		text-align: center;
		position: absolute;
		right: -35px;
		top: 50%;

		// .triangle{}
		.triangle {
			width: 0;
			height: 0;
			border-top: 15px solid transparent;
			border-bottom: 15px solid transparent;
			border-right: 25px solid rgba(0, 0, 0, 0.1);
		}
	}

	.flightItem {
		display: flex;
		justify-content: space-between;
		width: 100%;
		padding: 10px;
		background: #f5f5f5;
		margin-bottom: 10px;
		border-radius: 15px;

		.line1 {
			margin-bottom: 15px;

			.left {
				display: flex;
				align-items: center;

				.airline-icon {
					background: #FFF;
					width: 25px;
					height: 25px;
					border-radius: 25px;
					padding: 3px;

					.img {
						width: 20px;
						height: 20px;
					}
				}

				view {
					display: inline-block;
					color: #626262;
					font: normal 400 16px PingFang-SC-Medium;
				}
			}
		}

		.line2 {
			display: flex;
			align-items: center;
			justify-content: flex-start;
			margin-bottom: 15px;
			font: normal bold 16px "PingFang-SC-Heavy";

			.left {
				width: 50%;
				display: flex;
				line-height: 20px;
				align-items: center;
			}
		}

		.line3 {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 15px;
			font: normal 550 14px "PingFang-SC-Heavy";
		}

		.line {
			margin-bottom: 10px;
			display: flex;
			justify-content: space-between;
		}

		span {
			display: inline-block;
			color: rgba(95, 95, 95, 1);
			font: normal 400 12px PingFang-SC-Medium;
		}


	}

	.u-page {
		padding: 0;
	}

	.u-demo-block__title {
		padding: 10px 0 2px 15px;
	}

	.swipe-action {
		&__content {
			padding: 25rpx 0;

			&__text {
				font-size: 15px;
				color: $u-main-color;
				padding-left: 30rpx;
			}
		}
	}
</style>